<template>
  <div id="RankList">
    <div style="padding: 15px;">
      <button-tab v-if="sel==2" v-model="showcontent">
        <button-tab-item  @on-item-click="init()">本季度</button-tab-item>
      </button-tab>
      <button-tab v-if="sel==3" v-model="showcontent">
        <button-tab-item  @on-item-click="init()">本月度</button-tab-item>
      </button-tab>
    </div>
    <table class="c-table">
    	<thead>
			    <tr>
            <th>排名</th>
            <th class="opr-toplist-right">绩效分</th>
            <th class="opr-toplist-right">额外分</th>
            <th v-if="sel==2" class="opr-toplist-right">待审核</th>
            <th class="opr-toplist-right">总分</th>
	        </tr>
    	</thead>
    	<tbody>
	        <tr v-for="(sitem,index) in sorcelist">
            <td><span><span class="c-index c-gap-icon-right-small" :class='"c-index-hot"+index'>{{index+1}}</span>{{sitem.userName}}</span></td>
            <td class="opr-toplist-right">{{sitem.performanceScore}}</td>
            <td class="opr-toplist-right">{{sitem.auditScore}}</td>
            <td v-if="sel==2" class="opr-toplist-right">{{sitem.additionalScore}}</td>
            <td class="opr-toplist-right">{{sitem.sumScore}}</td>
          </tr>
    	</tbody>
    </table>
  </div>
</template>

<i18n>
This Year:
  zh-CN: 本年
This Season:
  zh-CN: 本季度
This Month:
  zh-CN: 本月
</i18n>

<script>
import { ButtonTab, ButtonTabItem, Divider } from 'vux'
export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider
  },
  data: function () {
    var ms_staffId = localStorage.getItem('ms_staffId')
    var type = this.$route.query.sel
    if (this.type === undefined) {
      this.type = 2
    } 
    return {
      staffId: ms_staffId, 
      sorcelist: [],
      date: [],
      sel: type,
      showcontent: 0
    }
  },
  mounted: function () {
    this.init()
  },
  methods: {
    init: function () {
      var self = this
      var url = '../wx/rank'
      if (self.sel == 3) {
        url = '../wx/rank/month'
      }
      self.$ajax({
        method: 'get',
        url: url,
        params: {
          staffId: self.staffId,
          scoreType: self.sel
        }
      })
      .then(function (res) {
        self.sorcelist = res.data
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style>
	.c-index {
    display: inline-block;
    padding: 1px 0;
    color: #fff;
    width: 14px;
    line-height: 100%;
    font-size: 14px;
    text-align: center;
    background-color: #8eb9f5;
	}
	.c-index-hot0 {
    background-color: #f54545;
	}
	.c-index-hot1 {
    background-color: #ff8547;
	}
	.c-index-hot2 {
    background-color: #ffac38;
	}
	.c-gap-icon-right-small {
	    margin-right: 5px;
	}
	.cr-content .c-table th:first-child, .cr-content .c-table td:first-child {
    padding-left: 0;
	}
	.c-table th {
  	width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: 400;
    color: #666;
    border-color: #f0f0f0;
    white-space: nowrap;
    background-color: #fafafa;
	}
	.c-table th, .c-table td {
    padding-left: 10px;
    line-height: 1.54;
    font-size: 14px;
    border-bottom: 1px solid #f3f3f3;
    text-align: left;
	}
	body, th, td, .p1, .p2 {
    font-family: arial;
	}
	td, th {
	  text-align: center;
    display: table-cell;
    vertical-align: inherit;
	}
	.opr-toplist-right{
	  padding-right: 5px;
	  text-align: center;
    white-space: nowrap;
	}
</style>

